<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>信达数据中心运维管理自动化平台</title>
    <meta name="keywords" content="信达数据中心运维管理自动化平台">
    <meta name="description" content="信达数据中心运维管理自动化平台">
    <link rel="shortcut icon" href="favicon.ico">
    <link href="../../css/bootstrap.min.css?v=3.3.6" rel="stylesheet">
    <link href="../../css/font-awesome.css?v=4.4.0" rel="stylesheet">
    <link href="../../css/animate.css" rel="stylesheet">
    <!-- Data Tables -->
    <link href="../../css/plugins/dataTables/dataTables.bootstrap.css" rel="stylesheet">
    <link href="../../css/style.css?v=4.1.0" rel="stylesheet">
    <style type="text/css">
    .modal-body {
        padding-right: 40px;
    }

    #editForm .row {
        margin-bottom: 5px;
    }
    tbody tr {
        text-align: center;
    }
    thead tr th{
       text-align: center;   
    }
    .ibox-content{
        background-color: #fff;
    }
    .tabs-container .tab-pane .panel-body{
        border: none;
    }
    </style>
</head>

<body class="gray-bg">
    <div class="wrapper wrapper-content animated fadeInRight">
        <div class="row">
            <div class="col-sm-12">
                <div class="ibox">
                    <div class="ibox-title">
                        <h5>用户管理</h5>
                    </div>
                    <div class="ibox-content">
                        <div class="tabs-container">
                            <div class="tab-content">
                                <div id="tab-tabale1" class="tab-pane active">
                                    <div class="panel-body">
                                        <table class="table table-striped table-bordered table-hover dataTables">
                                            <thead>
                                                <tr>
                                                    <th>登录名</th>
                                                    <th>姓名</th>
                                                    <th>电话</th>
                                                    <th>邮箱</th>
                                                    <th>位置</th>
                                                    <th>部门</th>
                                                    <th>角色</th>
                                                    <th>备注</th>
                                                    <th>操作</th>
                                                </tr>
                                            </thead>
                                            <tfoot>
                                                <tr>
                                                    <th>登录名</th>
                                                    <th>姓名</th>
                                                    <th>电话</th>
                                                    <th>邮箱</th>
                                                    <th>位置</th>
                                                    <th>部门</th>
                                                    <th>角色</th>
                                                    <th>备注</th>
                                                    <th>操作</th>
                                                </tr>
                                            </tfoot>
                                        </table>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- 模态框修改 -->
    <div class="modal inmodal fade" id="change" tabindex="-1" role="dialog" aria-hidden="true">
        <div class="modal-dialog modal-md">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
                    <h4 class="modal-title">修改</h4>
                </div>
                <div class="modal-body" style="text-align: center">
                    <form id="editForm" class="form">
                        <div class="row">
                            <div class="col-sm-6">
                                <div class="row">
                                    <div class="form-group draggable">
                                        <label class="col-sm-4 control-label pdn">姓名:</label>
                                        <div class="col-sm-8">
                                            <input id="RE_NAME" name="RE_NAME" class="RE_NAME form-control" type="text">
                                            <div class="tipinfo"></div>
                                        </div>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="form-group draggable">
                                        <label class="col-sm-4 control-label pdn">部门:</label>
                                        <div class="col-sm-8">
                                            <input id="DEPT" name="DEPT" class="DEPT form-control" type="text">
                                            <div class="tipinfo"></div>
                                        </div>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="form-group draggable">
                                        <label class="col-sm-4 control-label pdn">电话:</label>
                                        <div class="col-sm-8">
                                            <input id="PHONE" name="PHONE" class="PHONE form-control" type="text">
                                            <div class="tipinfo"></div>
                                        </div>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="form-group draggable">
                                        <label class="col-sm-4 control-label pdn">邮箱:</label>
                                        <div class="col-sm-8">
                                            <input id="EMAIL" name="EMAIL" class="EMAIL form-control" type="text">
                                            <div class="tipinfo"></div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-sm-6">
                                <div class="row">
                                    <div class="form-group draggable">
                                        <label class="col-sm-4 control-label pdn">密码:</label>
                                        <div class="col-sm-8">
                                            <input id="PASSWORD" name="PASSWORD" class="PASSWORD form-control" type="text">
                                            <div class="tipinfo"></div>
                                        </div>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="form-group draggable">
                                        <label class="col-sm-4 control-label pdn">角色:</label>
                                        <div class="col-sm-8">
                                            <input id="ROLE" name="ROLE" class="form-control" type="text">
                                             <div class="tipinfo"></div>
                                        </div>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="form-group draggable">
                                        <label class="col-sm-4 control-label pdn">位置:</label>
                                        <div class="col-sm-8">
                                            <input id="ADDRESS" name="ADDRESS" class="ADDRESS form-control" type="text">
                                            <div class="tipinfo"></div>
                                        </div>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="form-group draggable">
                                        <label class="col-sm-4 control-label pdn">备注:</label>
                                        <div class="col-sm-8">
                                            <input id="REMARK" name="REMARK" class="REMARK form-control" type="text">
                                             <div class="tipinfo"></div>
                                        </div>
                                    </div>
                                </div>
                                
                            </div>
                        </div>
                        <div class="modal-footer mt10">
                            <button type="button" class="btn btn-danger" data-dismiss="modal">取消</button>
                            <button type="submit" class="btn btn-success add-btn-success">确认</button>
                            <button type="button" class="btn btn-info" id="resetBtn">重置</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
    <!-- 基础js -->
    <script src="../../js/jquery.min.js?v=2.1.4"></script>
    <script src="../../js/bootstrap.min.js?v=3.3.6"></script>
    <script src="../../js/content.js?v=1.0.0"></script>
    <!-- 插件js -->
    <script src="../../js/handlebars-v3.0.1.js"></script>
    <script src="../../js/plugins/echarts/echarts.js"></script>
    <!-- layer javascript -->
    <script src="../../js/plugins/layer/layer.min.js"></script>
    <!-- jQuery Validation plugin javascript-->
    <script src="../../js/plugins/validate/jquery.validate.min.js"></script>
    <!-- Data Tables -->
    <script src="../../js/plugins/dataTables/jquery.dataTables.js"></script>
    <script src="../../js/plugins/dataTables/dataTables.bootstrap.js"></script>
    <!-- 模板 -->
    <script id="tpl" type="text/x-handlebars-template">
        {{#each func}}
        <button type="button" class="btn btn-{{this.type}} btn-sm" onclick="{{this.fn}}">{{this.name}}</button>
    {{/each}}
    </script>
    <!-- 模板 -->
    <script type="text/javascript">
    $(function() {

        var tpl = $("#tpl").html(); //get template
        var template = Handlebars.compile(tpl);



        // 表格
        $('.dataTables').DataTable({
            " dom": "Bfrtip",
            // " dom": "Bfrtip",
            // bLengthChange: false, //去掉每页显示多少条数据方法
            // bFilter: false, //去掉搜索框方法三：这种方法可以,
                  "ajax": '../../data/dt.json',
            "columns": [
                { "data": "id1" },
                { "data": "id2" },
                { "data": "id3" },
                { "data": "id4" },
                { "data": "id5" },
                { "data": "id6" },
                { "data": "id7" },
                { "data": "id8" },
                { "data": null },
            ],
            columnDefs: [{
                    targets: 8, //point to four column
                    render: function(a, b, c, d) { //render that get data from source
                        var context = {
                            func: [
                                { "name": " 修改 ", "fn": "edit(\'" + c.id9 + "\')", "type": "primary" },
                                { "name": "删除", "fn": "del(\'" + c.id9 + "\')", "type": "danger" }
                            ]
                        };
                        var html = template(context); //匹配内容
                        return html;
                    }
                }

            ]
        });



        // 修改
        edit = function(id) {

            // alert(4);
            // $("#editForm")[0].reset();      // 重置数据
            // $("#editForm").validate().resetForm();   // 重置样式
            // console.log(id)
            // $(".edit_form input").val("")
            // $("body").data('ids', id)
            $('#change').modal("show");
        }




        // 删除
        del = function del(id) {
            alert('删除操作');
            // console.log(id)

            // swal({
            //         title: "您确定要删除这条信息吗",
            //         text: "删除后将无法恢复，请谨慎操作！",
            //         type: "warning",
            //         showCancelButton: true,
            //         confirmButtonColor: "#DD6B55",
            //         confirmButtonText: "是的，我要删除！",
            //         cancelButtonText: "让我再考虑一下…",
            //         closeOnConfirm: false,
            //         closeOnCancel: false
            //     },
            //     function(isConfirm) {
            //         console.log(id)
            //         if (isConfirm) {

            //             $.ajax({
            //                 url: getUrl() + '/deletServeCatalog?id=' + id,
            //                 type: 'GET',
            //                 dataType: 'jsonp', // 后端跨域才开启，模拟假数据注销掉
            //                 success: function(response) {
            //                     // var response = JSON.parse(response)   后端解决跨域和前端模拟假数据的时候都不需要格式化
            //                     console.log(response)
            //                 },
            //                 complete: function() {
            //                     table.ajax.reload()
            //                 }
            //             })
            //             swal("删除成功！", "您已经永久删除了这条信息。", "success");
            //         } else {
            //             swal("已取消", "您取消了删除操作！", "error");
            //         }
            //     });


        }




        $("#editForm").validate({
            onsubmit: true, // 是否在提交时验证
            onfocusout: function(element) { $(element).valid(); }, // 是否在获取焦点时验证，默认 false
            onkeyup: function(element) { $(element).valid(); }, // 是否在敲击键盘时验证，默认 false
            rules: {
                RE_NAME: {
                    required: true
                },
                PASSWORD: {
                    required: true
                },
                DEPT: {
                    required: true
                },
                ADDRESS: {
                    required: true
                },
                PHONE: {
                    required: true
                },
                EMAIL: {
                    required: true
                },
                ROLE: {
                    required: true
                },
                REMARK: {
                    required: true
                },

            },
            messages: {
                RE_NAME: {
                    required: "请输入姓名"
                },
                PASSWORD: {
                    required: "请输入密码"
                },
                DEPT: {
                    required: "请输入部门"
                },
                ADDRESS: {
                    required: "请输入位置"
                },
                PHONE: {
                    required: "请输入电话"
                },
                EMAIL: {
                    required: "请输入邮箱"
                },

                ROLE: {
                    required: "请输入角色"
                },

                REMARK: {
                    required: "请输入备注"
                },
            },
            // errorPlacement: function(error, element) {
            //     error.appendTo(element.parent().find(".tipinfo"));
            // }
        });


        $.validator.setDefaults({
            submitHandler: function() {
                alert("提交事件!");
            }
        });

        // 重置表单
        $("#resetBtn").click(function() {
            $("#editForm")[0].reset(); // 重置数据
            $("#editForm").validate().resetForm(); // 重置样式
        });





        setTimeout(function() {
            $(".dataTables_wrapper .row .col-sm-3").addClass('col-sm-6').removeClass('col-sm-3')
        }, 50);




    })
    </script>
</body>

</html>